<template>
  <div>
    <div class="card-container">
      <div class="tips">
        <div>注意:本模块内容填写规则:</div>
        <div>“纯文字”、“图片”只能选择其中一种。</div>
        <div>纯文字类型:勾选“纯文字”。在文本框中输入内容即可。</div>
        <div>图片类型: 图片类型是指 文本 + 图片( 文本也需较成图片格式)</div>
        <div>勾选“图片”,点击“选择文件”选中单个上传的图片，再点击“提交”</div>
        <div>支持gif,ipg,jpeg,png,bmp格式，如果有多张图片，可以多次重复选择。</div>
        <div>关于更多录入与排版问题，可咨询系统维护人员QQ: 83268641。</div>
      </div>
    </div>
    <el-collapse :model-value="['1', '2', '3', '4', '5', '6']">
      <el-form :model="form" :rules="rules" label-width="auto" :disabled="route.query.type === 'look'">
        <div class="card-container" v-for="(item, index) in form" key="index">
          <el-collapse-item :title="titleList[index]" :name="item.basisType">
            <el-row :gutter="20" style="margin-top: 15px">
              <el-col :span="8">
                <el-form-item label="上传方式" prop="uploadType">
                  <el-radio-group v-model="item.uploadType" @change="radioChange(index)">
                    <el-radio value="1">文字填写</el-radio>
                    <el-radio value="2">文件上传</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="" prop="editor">
                  <Editor v-model="item.textContent" v-if="item.uploadType == '1'" :disabled="route.query.type === 'look'" :min-height="200"/>
                  <MyFileUpload v-model="item.resourceList" v-else/>
                </el-form-item>
              </el-col>
              <el-col :span="24" style="display: flex; justify-content: flex-end" v-if="index == 5 && route.query.type !== 'look'">
                <el-form-item>
                  <el-button type="primary" @click="onSubmit(0)">保存草稿</el-button>
                  <el-button type="primary" @click="onSubmit(1)">下一步</el-button>
                  <el-button>取消</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
        </div>
      </el-form>
    </el-collapse>
  </div>
</template>

<script setup>
import Editor from '@/components/Editor'
import MyFileUpload from '@/components/MyFileUpload'
import {projectApplicationAddOrUpdate, projectApplication} from '@/api/departmentWaterResources/project.js'
import {useRoute} from "vue-router";

const {proxy} = getCurrentInstance();
const route = useRoute();
const {project_type, project_app_process_state} = proxy.useDict('project_type', 'project_app_process_state');

const titleList = [
  '1.立项背景、目的及意义',
  '2.项目背景',
  '3.主要研究内容和目标',
  '4.技术路线和创新点',
  '5.社会、经济和生态效益以及推广应用前景',
  '6.完成项目的支撑条件'
]
const data = reactive({
  form: [
    {
      basisType: '1',
      resourceList: [],
      textContent: null,
      uploadType: '1'
    },
    {
      basisType: '2',
      resourceList: [],
      textContent: null,
      uploadType: '1'
    },
    {
      basisType: '3',
      resourceList: [],
      textContent: null,
      uploadType: '1'
    },
    {
      basisType: '4',
      resourceList: [],
      textContent: null,
      uploadType: '1'
    },
    {
      basisType: '5',
      resourceList: [],
      textContent: null,
      uploadType: '1'
    },
    {
      basisType: '6',
      resourceList: [],
      textContent: null,
      uploadType: '1'
    },
  ],
  rules: {
    uploadType: [{required: true, message: '请选择上传方式', trigger: 'blur'}]
  }
});
const {form, rules} = toRefs(data);

function radioChange(index) {
  form.value[index].textContent = ''
  form.value[index].resourceList = []
}

const onSubmit = (type) => {
  projectApplicationAddOrUpdate({projectBasisReqList: form.value, projectId: route.query.id}).then(response => {
    if (type === 0) {
      proxy.$modal.msgSuccess("保存成功");
    } else {
      // emit('activeNext', 'tab4')
    }
  });
}

function init() {
  let id = ''
  if (route.query.type === 'add') {
    id = projectStore.getProjectData.projectId
  } else {
    id = route.query.id
  }
  projectApplication({projectId: id}).then(response => {
    if (response.rows.length > 0) {
      form.value = response.rows
    }
  });
}

init()

</script>

<style scoped lang="scss">
.card-container :deep(.el-collapse-item__content) {
  padding: 0;
}

.tips {
  color: red;
  margin: 20px;
}
</style>
